<div class="module-content">
  <div class="module-header">
    <h5 class="module-header-title"><i class="fas fa-map"></i>Map</h5>
    <div class="module-header-action">
      <button class="btn btn-primary" (click)="create()">Create</button>
    </div>
  </div>
  <div class="module-body">
    <div class="panel panel-grid">
      <div class="panel-heading">
        <span class="panel-title">Map List</span>
      </div>
      <div class="panel-body">
        <div class="list">
          <div class="list-body">

            <div *ngFor="let item of maps" class="list-grid-item" [ngClass]="{'active': map && item._id == map._id}" (click)="active(item)">
              <span>{{item.name}}</span>
              <!--<div style="justify-self: center">
                  <button class="btn btn-danger btn-xs" (click)="delete(feature)">Delete</button>
              </div>-->
            </div>

          </div>

        </div>
        <div class="panel-empty" *ngIf="!maps || maps.length == 0">Create Map</div>
      </div>
    </div>
    <div class="panel panel-grid">
      <div class="panel-heading">
        <span class="panel-title">Map Detail{{map? (' - ' + map.name) : ''}}</span>
      </div>
      <div class="panel-body">
        <nz-tabset *ngIf="map">
          <nz-tab nzTitle="General">
            <div class="panel">
              <div class="panel-heading">
                <span class="panel-title">General Info</span>
              </div>
              <div class="panel-body">
                <div class="info-form">
                  <div class="info-item">
                    <div class="info-label">name</div>
                    <div class="info-value">
                      <input nz-input [(ngModel)]="map.name">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nz-tab>
          <nz-tab nzTitle="Layers">
            TODO...
          </nz-tab>
          <nz-tab nzTitle="Labels">
            <div class="label-container">
              <div class="panel" *ngIf="label">
                  <div class="info-form" >
                    <div class="info-item">
                      <div class="info-label">text</div>
                      <div class="info-value">
                        <input nz-input [(ngModel)]="label.text" (ngModelChange)="redraw()">
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">lat</div>
                      <div class="info-value">
                        <input nz-input [(ngModel)]="label.position.lat" (ngModelChange)="redraw()">
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">lng</div>
                      <div class="info-value">
                        <input nz-input [(ngModel)]="label.position.lng" (ngModelChange)="redraw()">
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">zoom min</div>
                      <div class="info-value">
                        <input nz-input [(ngModel)]="label.zoom.min" (ngModelChange)="redraw()">
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">zoom max</div>
                      <div class="info-value">
                        <input nz-input [(ngModel)]="label.zoom.max" (ngModelChange)="redraw()">
                      </div>
                    </div>

                    <div class="info-item">
                      <div class="info-label">font family</div>
                      <div class="info-value">
                        <input nz-input [(ngModel)]="label.font.family" (ngModelChange)="redraw()">
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">font size</div>
                      <div class="info-value">
                        <input nz-input [(ngModel)]="label.font.size" (ngModelChange)="redraw()">
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">font color</div>
                      <div class="info-value">
                        <input type="color" nz-input [(ngModel)]="label.font.color" (ngModelChange)="redraw()">
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">font bold</div>
                      <div class="info-value">
                        <input nz-input [(ngModel)]="label.font.bold" (ngModelChange)="redraw()">
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">padding</div>
                      <div class="info-value">
                        <input nz-input [(ngModel)]="label.background.padding" (ngModelChange)="redraw()">
                      </div>
                    </div>

                    <div class="info-item">
                      <div class="info-label">back visible</div>
                      <div class="info-value">
                        <nz-switch [(ngModel)]="label.background.visible" (ngModelChange)="redraw()"></nz-switch>
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">back color</div>
                      <div class="info-value">
                        <input type="color" nz-input [(ngModel)]="label.background.color" (ngModelChange)="redraw()">
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">border visible</div>
                      <div class="info-value">
                        <nz-switch [(ngModel)]="label.border.visible" (ngModelChange)="redraw()"></nz-switch>
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">border color</div>
                      <div class="info-value">
                        <input type="color" nz-input [(ngModel)]="label.border.color" (ngModelChange)="redraw()">
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">border width</div>
                      <div class="info-value">
                        <input nz-input [(ngModel)]="label.border.width" (ngModelChange)="redraw()">
                      </div>
                    </div>
                  </div>
                  <div class="panel-footer">
                    <button class="btn btn-danger" (click)="deleteLabel()">Delete</button>
                    <div style="text-align: right"><button class="btn btn-primary" (click)="saveLabel()">Save</button></div>
                  </div>
              </div>
              <div class="panel-empty" *ngIf="!label">Create or Select Label</div>
              <div #mapDiv style="height: 500px;">
                <div class="toolbar">
                  <button class="btn" [ngClass]="{'btn-primary': option.label.mode == 1, 'btn-default': option.label.mode != 1}" [tooltip]="'create label'" placement="bottom" (click)="switchTool($event,1)"><i class="fas fa-map-signs"></i></button>
                  <button class="btn" [ngClass]="{'btn-primary': option.label.mode == 2, 'btn-default': option.label.mode != 2}" [tooltip]="'select label'" placement="bottom" (click)="switchTool($event,2)"><i class="fas fa-hand-pointer"></i></button>
                </div>
              </div>
            </div>
          </nz-tab>
        </nz-tabset>
        <div class="panel-empty" *ngIf="!map">Create and Select Map</div>
      </div>
      <div class="panel-footer">
        <button class="btn btn-danger" (click)="delete()" [disabled]="!map">Delete</button>
        <div class="panel-footer-action">
          <button class="btn btn-success" (click)="update()" [disabled]="!map">Update</button>
        </div>
      </div>
    </div>
  </div>
</div>
